<!--
 * @Author: Caroline 
 * @Date: 2018-10-26 14:47:42 
 * @Last Modified by:   Caroline 
 * @Last Modified time: 2018-10-26 17:47:42 
 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--告诉IE以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染-->
    <title>工程讲堂-产品讲坛</title>
    <link rel="stylesheet" href="../plugin/layui/css/layui.css">
    <link rel="stylesheet" href="../resources/css/basic.css">
    <link rel="stylesheet" href="../resources/css/pubComponet.css">
    <link rel="stylesheet" href="../resources/css/engineering.css">
    <script src="../js/jquery.min.js"></script>
    <script>
        //渲染公共头部导航--工程讲堂
        $(function () {
            setNav("page-engineerForm", "../pages/index_nav.html", "");
        })
    </script>
</head>

<body id="engineer-product">
    <!-- 公共头部 -->
    <div id="header">
        <div id="head"></div>
        <div id="nav"></div>
    </div>
    <div class="main_container">
        <div class="layout">
            <!-- banner -->
            <div class="imgWrap">
                <img src="../resources/images/enFoNewsBan.jpg" alt="">
            </div>
            <!-- 主体内容 -->
            <div class="floatWrapDiv mg_b24">
                <!-- 左侧tab切换主要展示内容 -->
                <div class="enNewsleft layui-tab layui-tab-brief" lay-filter="demo">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="11"><button class="blueBtn lgBth">地产行业</button></li>
                        <li lay-id="22"><button class="blueBtn lgBth">住房租赁</button></li>
                        <li lay-id="33"><button class="blueBtn lgBth">酒店行业</button></li>
                        <li lay-id="44"><button class="blueBtn lgBth">教育行业</button></li>
                        <li lay-id="55"><button class="blueBtn lgBth">政采央采</button></li>
                    </ul>
                    <div class="layui-tab-content bg_white mg_t24">
                        <!-- 地产内容 -->
                        <div class="layui-tab-item layui-show">
                            <div class="floatWrapDiv enNewsl_item mg_b24">
                                <div class="enNewsl_itemL">
                                    <button class="mdBth mg_b16 margin_r0 line-gradientBgLeftOrange">地产</button>
                                    <h2>0 9</h2>
                                    <h5>2018-09</h5>
                                </div>
                                <div class="enNewsl_itemM">
                                    <h5>海尔新风系统到底怎么样？</h5>
                                    <div>用微距微镜头观测拍摄的海尔飨宴冰箱内 西兰花的表面景观，存储7天后表面的小 花蕾仍如树上初绽的嫩芽般新鲜</div>
                                </div>
                                <div class="text-right enNewsl_itemR">600<a href="javascript:void(0)"><img src="../resources/images/icon/blackeye.jpg"
                                            alt=""></a></div>
                            </div>
                            <div class="floatWrapDiv enNewsl_item mg_b24">
                                <div class="enNewsl_itemL">
                                    <button class="mdBth mg_b16 margin_r0 line-gradientBgLeftOrange">地产</button>
                                    <h2>0 9</h2>
                                    <h5>2018-09</h5>
                                </div>
                                <div class="enNewsl_itemM">
                                    <h5>海尔新风系统到底怎么样？</h5>
                                    <div>用微距微镜头观测拍摄的海尔飨宴冰箱内 西兰花的表面景观，存储7天后表面的小 花蕾仍如树上初绽的嫩芽般新鲜</div>
                                </div>
                                <div class="text-right enNewsl_itemR">600<a href="javascript:void(0)"><img src="../resources/images/icon/blackeye.jpg"
                                            alt=""></a></div>
                            </div>
                            <div class="floatWrapDiv enNewsl_item mg_b24">
                                <div class="enNewsl_itemL">
                                    <button class="mdBth mg_b16 margin_r0 line-gradientBgLeftOrange">地产</button>
                                    <h2>0 9</h2>
                                    <h5>2018-09</h5>
                                </div>
                                <div class="enNewsl_itemM">
                                    <h5>海尔新风系统到底怎么样？</h5>
                                    <div>用微距微镜头观测拍摄的海尔飨宴冰箱内 西兰花的表面景观，存储7天后表面的小 花蕾仍如树上初绽的嫩芽般新鲜</div>
                                </div>
                                <div class="text-right enNewsl_itemR">600<a href="javascript:void(0)"><img src="../resources/images/icon/blackeye.jpg"
                                            alt=""></a></div>
                            </div>
                            <div class="floatWrapDiv enNewsl_item mg_b24">
                                <div class="enNewsl_itemL">
                                    <button class="mdBth mg_b16 margin_r0 line-gradientBgLeftOrange">地产</button>
                                    <h2>0 9</h2>
                                    <h5>2018-09</h5>
                                </div>
                                <div class="enNewsl_itemM">
                                    <h5>海尔新风系统到底怎么样？</h5>
                                    <div>用微距微镜头观测拍摄的海尔飨宴冰箱内 西兰花的表面景观，存储7天后表面的小 花蕾仍如树上初绽的嫩芽般新鲜</div>
                                </div>
                                <div class="text-right enNewsl_itemR">600<a href="javascript:void(0)"><img src="../resources/images/icon/blackeye.jpg"
                                            alt=""></a></div>
                            </div>
                            <div id="demo7" class="text-right"></div>
                        </div>
                        <div class="layui-tab-item">住房租赁</div>
                        <div class="layui-tab-item">酒店行业</div>
                        <div class="layui-tab-item">教育行业</div>
                        <div class="layui-tab-item">政采央采</div>
                    </div>
                </div>
                <!-- 右侧相关推荐 -->
                <div class="enNewsRight mg_l32">
                    <div class="mg_b24 mg_t10">
                        <a href=""><button class="lgBth grayDarkBtn">相关推荐</button></a>
                    </div>
                    <ul>
                        <li class="mg_b32"><a href=""><img src="../resources/images/enfonews1.jpg" alt=""></a></li>
                        <li class="mg_b32"><a href=""><img src="../resources/images/enfonews2.jpg" alt=""></a></li>
                        <li><a href=""><img src="../resources/images/enfonews3.jpg" alt=""></a></li>
                    </ul>
                </div>
            </div>

        </div>

        <!-- 吐槽杂谈 make complaints /talk-->
        <div id="talkWrap"></div>
    </div>
    <div id="footer"></div>
    <script src="../plugin/layui/layui.js"></script>
    <script src="../js/basic.js"></script>
    <script>
        //使用layui分页组件
        layui.use(['laypage', 'layer','element'], function () {
            var laypage = layui.laypage,
                layer = layui.layer,
                element = layui.element;
            //==》分页配置
            laypage.render({
                elem: 'demo7',//操作元素id
                theme: "#0073fe",//主题色
                count: 100,//总数
                prev: "<em><</em>",//‘上一页’内容显示
                next: "<em>></em>",//‘下一页’内容显示
                limits: [10, 30, 50, 100],//每页条数数组
                layout: ['count', 'prev', 'page', 'next', 'limit', "skip"],//配置显示分页哪些功能
                jump: function (obj) {//跳转操作的回调函数
                    console.log(obj)
                    //当前页数obj.curr;
                    //当前每页显示条数obj.limit;
                }
            });
            //==》监听折叠
            // element.on('collapse(test)', function (data) {
            //     layer.msg('展开状态：' + data.show);
            // });

            $('.site-demo-active').on('click', function () {
                var othis = $(this), type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });
        })

    </script>
</body>

</html>